<template>
  <div>
    <div id="titleName" v-if="this.$route.path=='/'||this.$route.path=='/details'">AIA银行管理账户系统</div>
    <div id="app">
      <vue-particles
        class="bgstyle"
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1.5"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
    #titleName{
    float: left;
    position:absolute;
    width: 70vw;
    left: 50%;
    top:30%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    letter-spacing: 1.5rem;
    padding-left: 5rem;
}
.bgstyle {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(
    to right,
    #e4afcb 0%,
    #b8cbb8 0%,
    #b8cbb8 0%,
    #e2c58b 30%,
    #c2ce9c 64%,
    #7edbdc 100%
  );
}

</style>